<template>
    <div class="main">
        <!-- <el-header style="margin-top: 12px; min-width: 901px;">
            <span style=" margin-right: 15px;">编码:</span>
            <el-input style="width: 180px;" size="small" placeholder="请输入编码" v-model="queryInfo.code"></el-input>
            <span style="margin-left: 25px; margin-right: 15px;">名称:</span>
            <el-input style="width: 180px;height: 32px;" size="small" placeholder="请输入名称"
                v-model="queryInfo.name"></el-input>
            <el-button type="primary" size="small" style="margin-left: 15px;"
                @click="getassignmentList()">查询</el-button>
            <el-button size="small" @click="resetForm()">重置</el-button>
            <el-button type="text">展开</el-button>
        </el-header> -->
        <el-main style="padding: 0;">
            <el-row>
                <el-col :span="24">
                    <el-button type="text" style="padding: 0 15px;margin: 8px 8px 8px 0; font-size: 16px;"
                        @click="addList" icon="el-icon-circle-plus-outline">新增</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 8px 8px 8px 0; font-size: 16px;"
                        icon="el-icon-download">导出</el-button>
                    <el-button type="text" style="padding: 0 15px;margin: 8px 8px 8px 0; font-size: 16px;"
                        icon="el-icon-upload2">导入</el-button>
                </el-col>
            </el-row>
            <!-- 数据渲染部分 -->
            <el-table :data="tableData" style="width: 100%" border row-key="id" lazy :load="load"
                :tree-props="{ children: 'children', hasChildren: 'hasChild' }">
                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column label="名称" width="200">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="符号">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px;color: #1890ff;">{{ scope.row.symbol }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="换算系数">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.hasChild }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用">
                    <template slot-scope="scope">
                        <span v-show="scope.row.isEnabled == '1'">是</span>
                        <span v-show="scope.row.isEnabled == '0'">否</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="DeleteTi(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>






            <!-- 添加或者编辑募捐团队右侧弹出的抽屉 -->
            <el-drawer :title="id ? '修改' : '新增'" :visible.sync="open" @close="open = false">
                <el-form :model="addassignment" ref="addassignment" label-width="100px" class="demo-ruleForm"
                    size="mini">
                    <el-row :gutter="10" style="padding: 15px;">
                        
                        
                        <el-col :span="24">
                            <el-form-item label="名称">
                                <el-input v-model="addassignment.name"></el-input>
                            </el-form-item>
                        </el-col>
                        
                        <el-col :span="24">
                            <el-form-item label="符号">
                                <el-input v-model="addassignment.symbol"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="基准单位" prop="code">
                                <el-tree :props="propsS" @node-click="handleNodeClickA" :load="loadNodeA" lazy
                                    ref="tree" highlight-current :node-key="key"></el-tree>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <el-form-item label="换算系数">
                                <el-input-number v-model="addassignment.factor" controls-position="right" style="width: 100%;">
                                    <template #decrease-icon>
                                        <el-icon>
                                            <Minus />
                                        </el-icon>
                                    </template>
                                    <template #increase-icon>
                                        <el-icon>
                                            <Plus />
                                        </el-icon>
                                    </template>
                                </el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="启用状态">
                                <el-select v-model="addassignment.isEnabled" placeholder="请选择" style="width: 100%;">
                                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="24">
                            <el-form-item label="备注">
                                <el-input v-model="addassignment.remark"></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="24">
                            <el-form-item label="创建人">
                                <el-input v-model="addassignment.faxReceipt" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="创建时间">
                                <el-date-picker :disabled="true" v-model="value1" type="datetime" style="width: 100%;"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="修改人">
                                <el-input v-model="addassignment.faxReceipt" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="修改时间">
                                <el-date-picker :disabled="true" v-model="value1" style="width: 100%;" type="datetime"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button v-if="id" type="primary" @click="editForm()">修改</el-button>
                        <el-button v-else type="success" @click="addForm()">添加</el-button>
                        <el-button @click="resetForm()">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>

















            <pagination :page="queryInfo.pageNo" :componentTotal="total" @changeRows="setRows" @changePage="setPage">
            </pagination>
        </el-main>
    </div>
</template>

<script>
import Pagination from "../Pagination";
export default {
    data() {
        return {
            id: '',
            open: false,//右侧抽屉
            visible: true,//删除的弹框
            dialogFormVisible: false,
            total: 0,
            queryInfo: {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            },
            value1: '',

            //子级菜单的页码数据
            queryInfoAAA: {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                field: 'id,,name,code,fullname,isEnabled_dictText,action',
                pageNo: 1,
                pageSize: 10,
                pid: '1242301004380692481',
            },









            //父级查询---【新增】
            queryInfoBBB: {
                _t: new Date().getTime(),
                pid:0,
                tableName: 'bas_measure_unit',
                condition: '',
                code: 'id',
                text: 'name',
                pidField: 'pid', 
                hasChildField: 'has_child',
            },
            // 子级查询---【新增】
            queryInfoCCC: {
                _t: new Date().getTime(),
                hasChildField: 'has_child',
                pidField: 'pid',
                code: 'id',
                text: 'name',
                tableName: 'bas_measure_unit',
                condition: '',
                pid: '1242301004380692481',
            },



            propsS: {
                label: 'title',
                children: 'leaf',
                isLeaf: 'leaf'
            },

            //父节点列表
            aerr: [],
            //子节点列表
            berr: [],
            cerr: [],
            currentNode: null, // 当前选中的节点
            key: 'key',







            //获取到的数据列表  
            tableData: [],
            addassignment: {
                "name": "名称",
                "symbol": "符号",
                "pid": "1242301004380692481",//单位的ID
                "factor": 8999,
                "isEnabled": "1"
            },
            options: [
                { value: '1', label: '是' },
                { value: '0', label: '否' }
            ],
            optionsA: [
                { value: '0', label: '一级' },
                { value: '1', label: '二级' }
            ],
        }
    },
    methods: {
        //获取子级菜单列表------[模块部分渲染]
        async load(tree, treeNode, resolve) {
            // console.log(tree);//获取到的数据
            this.queryInfoAAA.pid = tree.id;
            const { data: res } = await this.axios.get("bas/basMeasureUnit/childList", {
                params: this.queryInfoAAA,
            });
            if (res.code != 200) return this.$message.error(res.message);
            resolve(res.result)
        },







        //----------------------------------[新增时的级联选择器]
        handleNodeClickA(data) {
            if (!data.leaf) {
                this.addassignment.pid = data.key;
            }
        },
        async loadNodeA(node, resolve) {
            if (node.level === 0) {
                return resolve(this.aerr);
            }

            const params = node.level === 1 ? this.queryInfoCCC : { ...this.queryInfoCCC, pid: node.data.key };

            try {
                const { data: res } = await this.axios.get("sys/dict/loadTreeData", { params });
                const children = res.result.map(item => ({
                    ...item,
                    leaf: !item.children || item.children.length === 0
                }));
                resolve(children);
            } catch (error) {
                console.error('加载节点失败', error);
                resolve([]);
            }
        },
        async parments() {
            try {
                const { data: res } = await this.axios.get("sys/dict/loadTreeData", { params: this.queryInfoBBB });
                this.aerr = res.result;
            } catch (error) {
                console.error('加载父级菜单失败', error);
            }
        },
        async childrens() {
            try {
                const { data: res } = await this.axios.get("sys/dict/loadTreeData", { params: this.queryInfoCCC });
                this.berr = res.result;

            } catch (error) {
                console.error('加载子级菜单失败', error);
            }
        },














        //查询数据渲染列表
        async getassignmentList() {
            const { data: res } = await this.axios.get("bas/basMeasureUnit/rootList", {
                params: this.queryInfo,
            });
            if (res.code != 200) this.$message.error(res.message);
            this.tableData = res.result.records;
            this.total = res.result.total;
        },
        //初始化数据
        addList() {
            this.id = '';
            this.parments();
            this.addassignment = {
                "name": "",
                "symbol": "",
                "pid": "1242301004380692481",
                "factor": '',
                "isEnabled": ""
            };
            this.open = true;
        },
        //新增数据
        async addForm() {
            const { data: res } = await this.axios.post("bas/basMeasureUnit/add", this.addassignment);
            if (res.code != 200) return this.$message.error("新增录入失败");
            this.$message.success("新增录入成功");
            this.open = false;
            this.getassignmentList();
        },
        //编辑---【数据回显】
        handleEdit(row) {
            // console.log(index, row);
            this.id = row.id;
            this.addassignment = row;
            this.open = true;
        },
        //编辑数据
        async editForm() {
            const { data: res } = await this.axios.put("bas/basMeasureUnit/edit", this.addassignment);
            if (res.code != 200) return this.$message.error("编辑失败");
            this.$message.success("编辑成功");
            this.open = false;
            this.getassignmentList();
        },
        //删除提示操作
        DeleteTi(row) {
            this.$confirm(`此操作将永久删除该数据, 是否继续?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.handleDelete(row.id);
            });
        },
        //删除操作
        async handleDelete(id) {
            const { data: res } = await this.axios.delete(`bas/basMeasureUnit/delete`, {
                params: { id: id }
            });
            if (res.code != 200) return this.$message.error("删除失败");
            this.$message.success("删除成功");
            this.getassignmentList();
        },
        //重置数据
        resetForm() {
            this.queryInfo = {
                _t: new Date().getTime(),
                column: 'createTime',
                order: 'desc',
                code: '',
                name: '',
                field: 'id,billNo,billDate,customerId_dictText,isRubric_dictText,amt,checkedAmt,deductedAmt,billProcStatus_dictText,isApproved_dictText,isClosed_dictText,isVoided_dictText,remark,effectiveTime,approverId_dictText,flowId,createTime,createBy_dictText,sysOrgCode_dictText,updateTime,updateBy_dictText,action',
                pageNo: 1,
                pageSize: 10
            };
            this.getassignmentList()
        },

        // 分页器
        setRows(val) {
            this.queryInfo.pageSize = val;
            this.getassignmentList();
        },
        setPage(val) {
            this.queryInfo.page = val;
            this.getassignmentList();
        },
        //自动增加序号
        indexAdd(index) {
            const page = this.queryInfo.pageNo // 当前页码
            const pagesize = this.queryInfo.pageSize // 每页条数
            return index + 1 + (page - 1) * pagesize
        },

    },
    mounted() {
        this.parments();
        this.getassignmentList();
    },
    components: {
        Pagination
    },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    position: absolute;
    right: 0;
    height: 100%;
}

::v-deep .el-drawer.rtl {
    width: 50% !important;
}
</style>